<template>

  <div class="storeDetails">
    <Header title="店铺" />
    <div class="content">
      <div class="img"></div>
      <div class="foodSort">
        <div class="sort"></div>
        <div class="name">
          {{ data.title }}
          <img :src="data.img"
               alt=""
               class="store-img">
        </div>
        <van-tabs color="#ffc400">
          <van-tab v-for="(item,i) in data.storeData"
                   :key="i"
                   :title="item.name">
            <!-- {{ item.data }} -->

            <FoodList :index="i"
                      :foodData="item.data" />
          </van-tab>

        </van-tabs>

      </div>
    </div>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o"
                           text="客服"
                           dot />
      <van-action-bar-icon icon="cart-o"
                           text="购物车"
                           :badge="store.state.cartList.length" 
                           @click="goCart"/>
      <van-action-bar-button type="warning"
                             text="加入购物车"
                             @click="handleAddCart" />
      <van-action-bar-button type="danger"
                             text="立即购买" 
                             @click="goBuy"/>
    </van-action-bar>
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import FoodList from './components/FoodList.vue'
import { reactive } from '@vue/reactivity'
import { useStore } from 'vuex'
import { useRouter} from 'vue-router'
import { showToast } from 'vant';
let store = useStore()
let router = useRouter()
let data = reactive({
  title: '鱼拿酸菜鱼',
  img: 'https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440',
  storeData: [
    {
      name: '点菜',
      data: {
        content: '点菜',
        items: [
          {
            text: '热销套餐',
            children: [
              {
                pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cfcy168.com%2FUploadFiles%2F2020%2F2%2F15904074889874037.jpg&refer=http%3A%2F%2Fwww.cfcy168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645421933&t=66b58fbba9dce6f6b397e38820de24dc',
                title: '隆江猪脚饭',
                num: 0,
                price: 25.0,
                id: 0,
                add: true,
              },
              {
                pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cfcy168.com%2FUploadFiles%2F2020%2F2%2F15904074889874037.jpg&refer=http%3A%2F%2Fwww.cfcy168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645421933&t=66b58fbba9dce6f6b397e38820de24dc',
                title: '隆江猪脚饭',
                num: 0,
                price: 25.0,
                id: 1,
                add: true,
              },
            ],
          },
          {
            text: '超级折扣',
            children: [
              {
                pic: 'https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440',
                title: '无骨酸菜鱼+肥牛双拼',
                num: 0,
                price: 25.0,
                id: 5,
                add: true,
              },
              {
                pic: 'https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440',
                title: '香辣水煮鱼+肥牛双拼',
                num: 0,
                price: 25.0,
                id: 6,
                add: true,
              },
            ],
          },
        ],
      },
    },
    {
      name: '评价',
      data: {
        content: '评价',
      },
    },
    {
      name: '商家',
      data: {
        content: '商家',
      },
    },
  ],
})
const handleAddCart = (type) => {
  const newList = store.state.cartList
  data.storeData.forEach((item) => {
    item.data.items?.forEach((item) => {
      item.children.forEach((item) => {
        if (item.num > 0) {
          newList.push(item)
        }
      })
    })
  })
  if (newList.length===0) {
    showToast('请选择商品');
    return
  }
  store.commit('ADDCART',newList)
  type==='buy'?goCart():''
}
const goCart=()=>{
  console.log(111)
  
  router.push('/cart')
}
const goBuy=()=>{
  handleAddCart('buy')
}
</script>

<style lang="less" scoped>
.storeDetails {
  height: 100%;
  display: flex;
  flex-flow: column;
  .content {
    flex: 1;
    overflow-y: auto;
    .img {
      background: url('../../assets/yuna.jpg') no-repeat center/cover;
      width: 100%;
      height: 150px;
    }
    .foodSort {
      height: 500px;
      background-color: #fff;
      margin-top: -30px;
      border-radius: 20px 20px 0 0;

      .sort {
        margin-top: 10px;
      }
      .name {
        display: flex;
        padding: 20px;
        justify-content: space-between;
        .store-img {
          width: 80px;
          height: 80px;
          border-radius: 10px;
          margin-top: -30px;
        }
      }
    }
  }
}
</style>